<template>
	<view class="container">
		<view class="content">
			<uni-calendar :insert="true" :selected='selected' 
			:showMonth="false" 
			:selectNext="false"
			:range="false"
			@monthSwitch="monthSwitch"
			@change="change">
			</uni-calendar>
		</view>
		<view class="kaoqin" v-if="clockInfo.length>0">
			<view class="item" v-for="(item,index) in clockInfo" :key='index'>
				<view class="avatar">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="detail">
					<view class="title">
						{{item.title}}
					</view>
					<view class="clockInfo">
						<text>签到时间：{{item.clock_in_time}}</text>
						<text>签退时间：{{item.clock_out_time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			let date = new Date();
			let year = date.getFullYear(); //获取完整的年份(4位)
			let month = date.getMonth()+1; //获取当前月份(0-11,0代表1月)
			let day = date.getDate(); //获取当前日(1-31)
			return {
				selected: [],
				token: "",
				clockInfo: ""
			}
		},
		created() {
			uni.getStorage({
				key: 'user_info',
				success: (res) => {
					this.token = res.data.token;
					this.getData();
					this.getTodayClock();
				},
				fail: (res) => {
					uni.redirectTo({
						url: '../../login/auth'
					});
				}
			});
		},
		methods: {
			monthSwitch(date){
				console.log(date)
				let dateParam = date.year+'-'+date.month;
				this.getData(dateParam);
			},
			getTodayClock() {
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth(); //得到月份
				var date = now.getDate(); //得到日期
				month = month + 1;
				if (month < 10) month = "0" + month;
				if (date < 10) date = "0" + date;
				let time = year + "-" + month + "-" + date;
				this.getClock(time);
			},
			change(e) {
				if (Object.keys(e.extraInfo).length === 0) {
					return false;
				} else {
					this.getClock(e.fulldate);
				}
			},
			getData(date) {
				let param = {
					"token": this.token
				}
				if(date){
					param.date = date;
				}
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/index/attendance`,
					data: param,
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							this.selected = res.data.data;
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/index'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			},
			getClock(date) {
				uni.request({
					url: `https://mx.acktechnologies.com.cn/api/wxapp/mine/index/getClockData`,
					data: {
						"token": this.token,
						"date": date
					},
					method: 'GET',
					success: res => {
						console.log(res)
						if (res.data.code === 1) {
							this.clockInfo = res.data.data;
						} else if (res.data.code === 403) {
							uni.redirectTo({
								url: '../../login/index'
							});
						} else {
							uni.showToast({
								title: '服务器开小差了呢，请您稍后再试',
								icon: 'none'
							})
						}
					},
					fail: () => { //接口请求失败的处理
						uni.showToast({
							title: '服务器开小差了呢，请您稍后再试',
							icon: 'none'
						})
					},
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		background-color: #F9F9FB;
		overflow: hidden;

		.content {
			width: 670rpx;
			margin: 40rpx auto;
		}
	}

	.kaoqin {
		width: 670rpx;
		margin: 0 auto;
		background-color: #FFFFFF;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 8px;
		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			box-sizing: border-box;

			.avatar {
				width: 112rpx;
				height: 112rpx;
				border-radius: 56rpx;
				overflow: hidden;
				margin-right: 10px;
				image {
					width: 112rpx;
					height: 112rpx;
					border-radius: 56rpx;
				}
			}

			.detail {

				.title {
					font-size: 15px;
					color: #333333;
				}

				.clockInfo {
					font-size: 13px;
					color: #999999;
					margin-top: 20rpx;

					text:nth-child(2) {
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
